<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>响应式布局调整</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
      }

      #silder {
        width: 250px;
        height: 100vh;
        background-color: #333;
        color: white;
        float: left;
        padding: 20px;
      }

      #content {
        margin-left: 250px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="silder">slider content</div>
    <div id="content">Main content</div>
    <script>
      function adjustLayout() {
        const silder = document.getElementById("silder");
        const content = document.getElementById("content");

        if (window.innerWidth < 600) {
          silder.style.width = "100%";
          content.style.marginLeft = "0";
        } else {
          silder.style.width = "250px";
          content.style.marginLeft = "250px";
        }
      }
      window.addEventListener("resize", adjustLayout);
    </script>
  </body>
</html>
